<template>
  <div class="container">
    <div class="all_pro_list">
      <div class="top_se">
        <h1 style="margin-top: 10px">{{keyword=='all'?'全部商品':keyword=='brand'?'地州':'品牌'}}</h1>
        <el-divider></el-divider>
        <div class="filter-bar">
          <div :class="{'color':tagNumber==0}" @click="tag(0)">综合排序</div>
          <div :class="{'color':tagNumber==1}" style="margin: 0 10px" @click="tag(1)">价格从低到高</div>
          <div :class="{'color':tagNumber==2}" @click="tag(2)">价格从高到低</div>
          <div style="margin: 0 10px">
            <el-input v-model="params.startPrice" placeholder="价格" clearable style="width: 100px"
                      size="mini"></el-input>
            -
            <el-input v-model="params.endPrice" placeholder="价格" clearable style="width: 100px" size="mini"></el-input>
          </div>
          <el-button type="success" size="mini" @click="tag(3)">确定</el-button>
        </div>
        <el-divider></el-divider>
      </div>
      <ProductList :products="productList"></ProductList>
    </div>
  </div>
</template>

<script>
import ProductList from "@/components/productList/ProductList";

export default {
  components: {ProductList},
  data() {
    return {
      tagNumber: 0,
      productList: [],
      params: {
        page: 1,
        pageSize: 8,
        type: 0,
        regionId: null,
        searchWord: null,
        startPrice: null,
        endPrice: null
      },
      keyword: 'all',
      total: 0
    }
  },
  watch: {
    '$route.query': {
      handler(newVal, oldVal) {
        // 当路由查询参数变化时执行的代码
        console.log('Query changed from', oldVal, 'to', newVal);
        if (newVal.keyword == "all") {
          this.keyword= 'all'
          this.params.regionId=null
          this.params.startPrice=null
          this.params.endPrice=null
          this.params.type=0
          this.tagNumber=0
          this.params.searchWord=""
          this.getProductList()
        }else if (newVal.keyword == "brand"){
          this.keyword = "brand"
          this.params.regionId=newVal.Id
          this.params.startPrice=null
          this.params.endPrice=null
          this.params.searchWord=""
          this.getProductList()
        }else if(newVal.keyword=="search"){
          this.keyword="all"
          this.params.regionId=null
          this.params.startPrice=null
          this.params.endPrice=null
          this.params.type=0
          this.tagNumber=0
          this.params.searchWord=newVal.text
        }
      },
      immediate: true, // 立即以初始值作为回调函数的参数执行一次
      deep: true // 深度监听，可以监听到对象内部值的变化
    }
  },
  created() {
    if (this.$route.query.keyword == "all") {
      this.keyword= 'all'
      this.params.regionId=null
      this.params.searchWord=""
      this.getProductList()
    }else if (this.$route.query.keyword == "brand"){
      this.keyword = "brand"
      this.params.regionId=this.$route.query.id
      this.params.searchWord=""
      this.getProductList()
    }else if (this.$route.query.keyword=="search"){
      this.keyword="all"
      this.params.regionId=null
      this.params.startPrice=null
      this.params.endPrice=null
      this.params.type=0
      this.tagNumber=0
      this.params.searchWord=this.$route.query.text
      this.getProductList()
    }
  },
  methods: {
    tag(index) {
      if (index != 3) {
        this.params.type = index
        this.tagNumber = index
      }
      this.getProductList()
    },
    getProductList() {
      if (this.tagNumber == 3) {
        if (!this.params.startPrice) return this.$message.error("请输入价格区间")
        if (!this.params.endPrice) return this.$message.error("请输入价格区间")
      }
      this.$api.common.searchAll(this.params).then(res => {
        if (res.code == 200) {
          this.productList = res.data.records
          this.total = res.data.total
        }
      })
    }
  }

}
</script>
<style scoped lang="less">
.color {
  color: rgb(138, 182, 96);

}

/deep/ .el-divider--horizontal {
  margin: 13px 0 !important;
}

.all_pro_list {
  margin: 20px;
  min-height: 500px;
  border: 1px solid gainsboro;

  .filter-bar {
    cursor: pointer;
    display: flex;
    padding-left: 10px;
  }
}

</style>